<template>
  <div>
    <div ref="jsonEditorContainer" style="width: 100%; height: 90vh;" />
  </div>
</template>

<script>
import JSONEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.css'

export default {
  data() {
    return {
      editor: null,
      jsonData: JSON.stringify(this.$store.state.config.configData),
      intervalId: null, // 用来存储定时器的 ID
    }
  },
  mounted() {
    // this.intervalId = setInterval(() =>{
    //   this.goToNextPage()
    // },5000)
    // 初始化 JSON Editor
    const container = this.$refs.jsonEditorContainer
    const options = {
      mode: 'code', // 支持 "tree", "view", "form", "code", "text" 等模式
      onChange: this.handleChange
    }

    this.editor = new JSONEditor(container, options)

    // 设置初始数据
    this.editor.set(JSON.parse(this.jsonData))
  },
  beforeDestroy() {
    // 销毁编辑器实例
    if (this.editor) {
      this.editor.destroy()
    }
    // 在组件销毁前清除定时器
    // if (this.intervalId) {
    //   clearInterval(this.intervalId);
    // }
  },
  methods: {
    handleChange() {
      // 当编辑器数据改变时，获取新的 JSON 数据
      try {
        this.jsonData = this.editor.get()
        console.log('JSON 数据更新:', this.jsonData)
      } catch (err) {
        console.log('JSON 格式错误:')
      }
    }
  }
}
</script>

<style scoped>
/* 样式覆盖 */
.jsoneditor {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
